<template>
    <div class="bg">
        <div class="login">
            <div class = "logo">
                <img :src="logo" alt="" width="60px" height="60px">
                <h1 class="ml">智慧瓦特管理系统</h1>
            </div>
            <el-form :model="ruleForm" :rules="rules" ref="formRef">
                    <el-form-item prop="username">
                        <el-input v-model="ruleForm.username" placeholder="请输入用户名" prefix-icon="user"/>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="ruleForm.password" placeholder="请输入密码" prefix-icon="Lock" type="password" autocomplete="off"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" style="width: 100%;" @click="handleLogin">登录</el-button>
                        <!-- <el-button>Cancel</el-button> -->
                    </el-form-item>
                </el-form>
        </div>
    </div>
</template>
<script setup lang="ts">
import logo from "@/assets/logo.png"
import { reactive, ref } from "vue"
import type { FormRules,FormInstance} from 'element-plus'
import { userUserStore } from "@/store/auth"
import { useRouter } from "vue-router"
//定义具体接口类型
interface RuleForm{
    username:string,
    password:string
}
//写一个接口定义reactive对应的类型  即RuleForm对应的类型
const ruleForm:RuleForm = reactive({
    username:"",
    password:""
})
//泛型中套泛型                                                                                                                                                                                                                                                                                                                                                                                            
const rules = reactive<FormRules<RuleForm>>({
    username:[
        {required:true,message:"用户名不能为空",trigger:"blur"},
        {min:2,max:8,message:"用户名要求2-8位数字字母组合",trigger:"blur"}
],
    password:[
        {
            required:true,message:"密码不为空",trigger:"blur"  
        },
        // {
        //     pattern:/^\d{6}$/,message:"密码必须是六位纯数字",trigger:"blur"
        // }
    ]}
        )
const formRef=ref<FormInstance>(); 
const userStore = userUserStore();
const router = useRouter();
const handleLogin=()=>{
    formRef.value?.validate(async(valid:boolean)=>{
        //?是可选操作符  obj？.name 只有obj不为空的时候会读取validate 
        // 如果为空，整个表达式返回undefined
        if(valid){
            //校验通过(校验格式)
            // 此处添加异步阻塞一下，使userStore.login的Api执行完才执行下面的代码
            //因为login的返回值也是异步函数，所以可以直接加await 不用加then
            await userStore.login(ruleForm);
            router.push("/")
        }
        console.log("handleLogin",valid)
    })
}
</script>
<style lang = 'less' scoped> //加上scoped只在当前组件中有效1
    .bg {
        background-image: url("../assets/loginBG.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 100vh;
        .login{
            width: 500px;
            height: 300px;
            padding: 50px;
            box-shadow:0 0 10px 10px #f4f4f4;
            text-align: center;
            position: absolute;
            top: 50%;
            margin-top: -200px;
            left:25%;
            .logo{
                display: flex; //居中
                justify-content: center;
                align-items: center;
                margin-bottom: 40px;
                h1{
                    color: rgb(14, 53, 10);
                }
            }
        }

    }

</style>